<template>
  <a-table :columns="columns" :dataSource="dataSource">
    <template #headerCell="{ column, title }">
      <div v-if="column.dataIndex === 'name'">当前：{{ title }}</div>
    </template>
    <template #emptyText>没有数据</template>
    <template #bodyCell="{ text, record, index, column }">
      <div v-if="column.dataIndex === 'methods'">
        <a-button>编辑</a-button>
      </div>
      <div v-if="column.dataIndex === 'age'">年龄：{{ text }}</div>
    </template>
  </a-table>
</template>
<script setup>
import { ref } from "vue";
import { getMenuList } from "../../services/menu";

const columns = [
  {
    dataIndex: "name",
    title: "菜名",
  },
  {
    dataIndex: "price",
    title: "价格",
  },
  {
    dataIndex: "methods",
    title: "操作",
  },
];
const getData = async () => {
  const res = await getMenuList();
  dataSource.value = res.data.data;
  console.log(res);
};
getData();
const dataSource = ref([]);
</script>
<style></style>
